import * as THREE from 'three';
import * as TWEEN from '@tweenjs/tween.js';

const width = window.innerWidth;
const height = window.innerHeight;

const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(-width/2,width/2,height/2,-height/2,1,1000);
// const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
const renderer = new THREE.WebGLRenderer({alpha:true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width,height);
document.body.appendChild(renderer.domElement);

camera.position.z = 1000;
function createSprite() {
  const material = new THREE.SpriteMaterial({color:0x00ff00});
  const sprite = new THREE.Sprite(material);
  sprite.scale.set(100,100,1)
  scene.add(sprite);
  const tween = new TWEEN.Tween(sprite.position);
  tween.to({x:200},2000).start();
  sprite.position.z = 1;
  return sprite;
}

createSprite();

export default function animate(ms=0) {
  console.log(ms);
  TWEEN.update(ms)
  requestAnimationFrame(animate);
  renderer.render(scene,camera);
}
console.log('tween!');
